<template>
	<view class="home">
		<navbar></navbar>
		<tab :list="tabList" @tab="tab"></tab>
		
		<list-scroll> 
			<list-card mode="base"></list-card>
			<list-card mode="image"></list-card>
			<list-card mode="column"></list-card>
		</list-scroll>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				title: 'Hello',
				tabList: []
			}
		},
		onLoad() {
           this.getLabel()
		},
		methods: {
			tab({data,index}){
				console.log(data,index);
			},
            getLabel() {
				this.$api.get_label({
					//name: 'get_label'
				}).then((res) => {
					const {
						data
					} = res
					this.tabList = data
				})
			}
		}
	}
</script>

<style lang="scss"> 
	page {
		height: 100%;
		display: flex;
	}
	.home {
		display: flex;
		flex-direction: column;
		flex: 1;
		//border: 1px red solid;
		overflow: hidden;
		.scroll {
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;
			.list-scroll {
				height: 100%;
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>
